import React, {PropsWithChildren} from 'react';
import {
  ViewProps,
  View,
  TouchableOpacity,
  ViewStyle,
  StyleSheet,
  Platform,
} from 'react-native';
import {STYLE_COLOR} from 'variables';

const styles = StyleSheet.create({
  containerStyle: {
    backgroundColor: STYLE_COLOR.CONTENT_BACKGROUND,
    marginHorizontal: 16,
    marginTop: 12,
    marginBottom: 8,
  },
  wrapperStyle: {minHeight: 44},
  shadowContainer: {
    elevation: 5,
    shadowColor: Platform.OS === 'ios' ? 'rgba(51,51,51,0.1)' : 'rgb(51,51,51)',
    shadowOpacity: 1,
    shadowOffset: {
      width: 0,
      height: 4,
    },
    shadowRadius: 16,
  },
  roundContainer: {
    borderRadius: 8,
  },
  roundWrapper: {
    borderRadius: 8,
    overflow: 'hidden',
  },
  plainContainer: {
    marginHorizontal: 0,
  },
});

export {styles as cardStyles};

export type CardProps = ViewProps & {
  onPress?: () => void;
  disabled?: boolean;
  shadow?: boolean;
  round?: boolean;
  plain?: boolean;
  containerStyle?: ViewStyle;
  wrapperStyle?: ViewStyle;
};

export const Card = ({
  children,
  onPress,
  disabled,
  shadow,
  round = true,
  plain,
  containerStyle,
  wrapperStyle,
  ...props
}: PropsWithChildren<CardProps>) => {
  const InnerComponent: React.ComponentClass<any> = onPress
    ? TouchableOpacity
    : View;
  return (
    <View
      style={[
        styles.containerStyle,
        !plain && shadow && styles.shadowContainer,
        !plain && (round || shadow) && styles.roundContainer,
        plain && styles.plainContainer,
        containerStyle,
      ]}
      {...props}>
      <InnerComponent
        style={[
          (round || shadow) && styles.roundWrapper,
          styles.wrapperStyle,
          wrapperStyle,
        ]}
        onPress={onPress}
        disabled={disabled}
        activeOpacity={0.8}>
        {children}
      </InnerComponent>
    </View>
  );
};
